<template>
  <div>
    <!-- 底部导航标签栏 -->
    <van-tabbar v-model="active" >
      <!-- badge是控制徽标数量 -->
      <van-tabbar-item
        @click="goHome(item.urls)"
        v-for=" (item,index) in bottomJump"
        :key="index"
        badge
      >
        <span>{{item.title}}</span>
        <template #icon="props">
          <i :class="props.active ? item.active : item.inactive" badge='5'></i>
        </template>

      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: [],
  data () {
    return {
      active: 0,
      // 底部tep栏数据及跳转的页面数据地址
      bottomJump: [
        {
          title: '首页',
          active: 'iconfont icon-zhuye blue',
          inactive: 'iconfont icon-zhuye',
          urls: '/'
        },
        {
          title: '会员',
          active: 'iconfont icon-huiyuan blue',
          inactive: 'iconfont icon-huiyuan',
          urls: '/member'
        },
        {
          title: '购物车',
          active: 'iconfont icon-gouwuchezhengpin blue',
          inactive: 'iconfont icon-gouwuchezhengpin',
          urls: window.localStorage.getItem('cartsId') ? '/price' : '/shop'

        },
        {
          title: '分类',
          active: 'iconfont icon-fenlei blue',
          inactive: 'iconfont icon-fenlei',
          urls: '/good'
        },
        {
          title: '搜索',
          active: 'iconfont icon-sousuo blue',
          inactive: 'iconfont icon-sousuo',
          urls: '/search'
        }
      ]
    }
  },
  mounted () {},
  methods: {
    // 点击底部导航跳转到对应的网页
    goHome (id) {
      console.log(id)
      // 点击底部导航跳转到对应的网页
      this.$router.push(id)
    }
  }

}
</script>
<style lang="less" scoped>
.blue{
    color: rgb(37, 100, 216);
}
.van-image {
  width: 50px;
  height: 50px;
}
.van-swipe img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 240px;
  padding: 30px 60px;
  background-color: #fff;
  pointer-events: none;
}
.CommodityInterval {
  margin-top: 10px;
}
</style>
